<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			.cetner_type{ background-color:#fff; position: relative; height: 0.80rem;}
			.cetner_type a{ float: left; width: 20%; text-align: center; font-size: 0.28rem; color: #666; line-height: 0.80rem; height: 0.80rem; overflow: hidden;}
			.cetner_type a i{ display:inline-block; vertical-align: top; box-sizing: border-box; height: 0.80rem; border-bottom: 0.05rem #fff solid;}
			.cetner_type a.on{ color:#3262F1;}
			.cetner_type a.on i{ border-color:#3262F1;}
			
			.order_tab{ height: 50px; background-color: #fff; overflow: hidden;}
			.order_tab a{ float:left; position: relative; width: 25%; text-align: center; font-size: 14px; font-weight:500; color: #9F9F9F; line-height: 45px;}
			.order_tab a.on{ color:#3262F1; background-color: transparent;}
			.order_tab a.on::after{ position:absolute; content: ""; left: 50%; margin-left: -10px; bottom: 0; width: 20px; border-bottom: 2px #3262F1 solid;}

			
		</style>
	</head>
	<body>
		<header class="header" id="header" style="height:90px;">
			<ul class="wrapper header_01">
				<a href="javascript:;" tapmode onclick="closeWin();" class="btn back"></a>
				<h1>发布的货源</h1>
			</ul>
			<div class="order_tab" id="tablist">
				<a href="javascript:;" tapmode onclick="changetab(0);" class="on">发布中</a>
				<a href="javascript:;" tapmode onclick="changetab(1);">进行中</a>
				<a href="javascript:;" tapmode onclick="changetab(2);">已完成</a>
				<a href="javascript:;" tapmode onclick="changetab(3);">已失效</a>
			</div>
		</header>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript">
		var aTabList,curIndex = 0;
		apiready = function() {
			api.parseTapmode();
			var header = $api.byId('header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var body_h = $api.offset($api.dom('body')).h;
			
			aTabList = document.getElementById("tablist").children;
			api.openFrameGroup({
				name: 'billgroupsend',
				bounces: false,
				rect: {
					x: 0,
					y: headerPos.h,
					w: 'auto',
					h: 'auto'
				},
				frames: [{
					name: 'goods_frm',
					url: 'goods_frm.html',
					bgColor: '#fff'
				}, {
					name: 'goodsding_frm',
					url: 'goodsding_frm.html',
					bgColor: '#fff'
				}, {
					name: 'goodsdone_frm',
					url: 'goodsdone_frm.html',
					bgColor: '#fff'
				}, {
					name: 'goodsexpire_frm',
					url: 'goodsexpire_frm.html',
					bgColor: '#fff'
				}]
			}, function(ret, err) {
				//curIndex = ret.index;
				changeIndex(ret.index);

			});
			
		}
		var changeIndex = function(idx){
			if (idx == curIndex) return;
			curIndex = idx;
			for (var i = 0; i < aTabList.length; i++) {
					if (i == idx) {
					$api.addCls(aTabList[idx],'on');
					} else{
					$api.removeCls(aTabList[i],'on');
					}
			}

		}
		function changetab(idx)
		{
			if (idx == curIndex) return;
			curIndex = idx;
			for (var i = 0; i < aTabList.length; i++) {
				if (i == idx) {
					$api.addCls(aTabList[idx],'on');
				} else{
					$api.removeCls(aTabList[i],'on');
				}
			}
			api.setFrameGroupIndex({
				name: 'billgroupsend',
				index: idx,
				scroll: true
			});
		}
		function closeWin(){
			api.closeWin({
			});
		}
	</script>
</html>
